<script setup>
import { queryUserTree } from '@/api/system/user'
import { Edit, Search, Refresh } from '@element-plus/icons-vue'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:visible', 'save'])

const multipleTableRef = ref()
const loading = ref(false)

const handleUpdate = () => {
  const selectedRows = multipleTableRef.value.getSelectionRows()
  if (selectedRows.length) {
    submitBtnLoading.value = true
    emit('save', selectedRows[0].id)
  }
}
const resetForm = () => {
  emit('update:visible')
  multipleTableRef.value.clearSelection()
  searchFormRef.value.resetFields()
}
const tableData = ref([])
const searchFormRef = ref(null)
const searchData = reactive({
  orgName: ''
})

const handleTreeData = (treeData, searchValue) => {
  if (!treeData || treeData.length === 0) {
    return []
  }
  const array = []
  for (let i = 0; i < treeData.length; i += 1) {
    let match = false
    for (let pro in treeData[i]) {
      if (typeof treeData[i][pro] == 'string') {
        match |= treeData[i][pro].includes(searchValue)
        if (match) break
      }
    }
    if (handleTreeData(treeData[i].children, searchValue).length > 0 || match) {
      array.push({
        ...treeData[i],
        children: handleTreeData(treeData[i].children, searchValue)
      })
    }
  }
  return array
}

const handleSearch = async () => {
  const res = await queryUserTree({ name: '' })
  tableData.value = handleTreeData(res.data, searchData.orgName)
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  queryOrg()
}

const queryOrg = () => {
  const param = {
    name: ''
  }
  queryUserTree(param).then((res) => {
    tableData.value = res.data
  })
}

const selectCheckbox = (selection, row) => {
  if (selection.length > 1) {
    let del_row = selection.shift()
    multipleTableRef.value.toggleRowSelection(del_row, false) //设置这一行取消选中
    multipleTableRef.value.setCurrentRow(row)
  }
}
const submitBtnLoading = ref(false)
watch(
  () => props.visible,
  (newValue, oldValue) => {
    if (newValue) {
      submitBtnLoading.value = false
      queryOrg()
    }
  }
)
defineExpose({
  submitBtnLoading
})
</script>

<template>
  <el-dialog :close-on-click-modal="false" v-model="visible" title="修改组织" @close="resetForm" width="74%">
    <div shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="orgName" label="组织名称">
          <el-input v-model="searchData.orgName" placeholder="请输入组织名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbar-wrapper">
      <div>
        <el-button type="primary" plain :icon="Edit" :loading="submitBtnLoading" @click="handleUpdate">修改</el-button>
      </div>
    </div>
    <div v-loading="loading">
      <div class="toolbar-wrapper"></div>
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          ref="multipleTableRef"
          row-key="id"
          default-expand-all
          highlight-current-row
          @select="selectCheckbox"
          :filter-method="filterNode"
          max-height="45vh"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="name" min-width="120" label="组织名称" align="center" />
          <el-table-column prop="type" min-width="120" label="组织类型" align="center" />
          <el-table-column prop="showOrder" min-width="120" label="显示顺序" align="center" />
          <el-table-column prop="status" min-width="220" label="状态" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.status === 0" type="success" effect="plain">启用</el-tag>
              <el-tag v-else type="danger" effect="plain">停用</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.search-wrapper {
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  :deep(.el-button) {
    padding: 6px 12px;
  }
}
.table-wrapper {
  margin-bottom: 20px;
}
:deep(.el-table__header .el-table-column--selection .el-checkbox__inner) {
  display: none;
}
</style>
